<template>
  <div>
    <el-row style="margin-bottom:20px;display:flex;justify-content:flex-start">
      <el-input
        placeholder="标准物质名称"
        v-model="searchmaterial.mname"
        style="width:20%;margin-right:10px"
        clearable
      ></el-input>

      <el-input
        placeholder="生产厂家"
        v-model="searchmaterial.manfact"
        style="width:20%;margin-right:10px"
        clearable
      ></el-input>
      <el-input
        placeholder="使用仪器"
        v-model="searchmaterial.useequ"
        style="width:20%;margin-right:10px"
        clearable
      ></el-input>
      <el-date-picker
        clearable
        v-model="date1"
        type="daterange"
        rangeSeparator="至"
        valueFormat="yyyy-MM-dd"
        startPlaceholder="购置日期"
        endPlaceholder="购置日期"
      ></el-date-picker>
      <el-date-picker
        clearable
        v-model="date2"
        type="daterange"
        style="margin:0 10px"
        rangeSeparator="至"
        valueFormat="yyyy-MM-dd"
        startPlaceholder="有效日期"
        endPlaceholder="有效日期"
      ></el-date-picker>

      <el-button size="mini" type="primary" @click="getmaterialList">搜索</el-button>
    </el-row>

    <el-row>
      <el-button size="mini" @click="addmaterial" v-if="usertype=='gly'">添加标准物质</el-button>
      <el-button size="mini" type="primary" @click="editmaterial" v-if="usertype!='syr'">编辑</el-button>
      <el-button size="mini" type="success" @click="deletematerial" v-if="usertype=='gly'">删除</el-button>
      <el-button size="mini" type="info" @click="daochu">导出</el-button>
    </el-row>
    <el-divider></el-divider>
    <el-table
      :data="materialList"
      stripe
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="hash.mname" label="标准物质名称"></el-table-column>
      <el-table-column prop="hash.scale" label="规格型号"></el-table-column>
      <el-table-column prop="hash.manfact" label="生产厂家"></el-table-column>
      <el-table-column prop="hash.manufdate" label="生产日期"></el-table-column>
      <!--
      <el-table-column prop="hash.standard_value" label="标准值"></el-table-column>
      <el-table-column prop="hash.unit" label="单位"></el-table-column>


      <el-table-column prop="hash.useequ" label="使用仪器"></el-table-column>-->
      <el-table-column prop="hash.bytime" label="购置日期"></el-table-column>
      <el-table-column prop="hash.number" label="购置数量"></el-table-column>
      <el-table-column prop="hash.effective_time" label="有效日期"></el-table-column>
      <el-table-column prop="hash.certnum" label="证书编号"></el-table-column>
      <el-table-column prop="hash.purpose" label="用途"></el-table-column>
      <el-table-column prop="hash.remark" label="备注"></el-table-column>
    </el-table>
    <el-table
      :data="newmaterialList"
      stripe
      style="width: 100%"
      v-show="false"
      id="tableexcelnewnew"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="hash.mname" label="标准物质名称"></el-table-column>
      <el-table-column prop="hash.scale" label="规格型号"></el-table-column>
      <el-table-column prop="hash.manfact" label="生产厂家"></el-table-column>
      <el-table-column prop="hash.manufdate" label="生产日期"></el-table-column>
      <!--
      <el-table-column prop="hash.standard_value" label="标准值"></el-table-column>
      <el-table-column prop="hash.unit" label="单位"></el-table-column>


      <el-table-column prop="hash.useequ" label="使用仪器"></el-table-column>-->
      <el-table-column prop="hash.bytime" label="购置日期"></el-table-column>
      <el-table-column prop="hash.number" label="购置数量"></el-table-column>
      <el-table-column prop="hash.effective_time" label="有效日期"></el-table-column>
      <el-table-column prop="hash.certnum" label="证书编号"></el-table-column>
      <el-table-column prop="hash.purpose" label="用途"></el-table-column>
      <el-table-column prop="hash.remark" label="备注"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="getmaterialList"
      :currentPage.sync="pagobj.currentPage3"
      :pageSize="pagobj.pagesize"
      layout="total, prev, pager, next"
      :total="pagobj.total"
      style="margin:20px 0;text-align:center"
    ></el-pagination>

    <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
      <el-form labelWidth="150px">
        <el-form-item label="标准物质名称" class="is-required">
          <el-input placeholder="请输入" v-model="materialData.mname"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input placeholder="请输入" v-model="materialData.scale"></el-input>
        </el-form-item>
        <el-form-item label="证书编号">
          <el-input placeholder="请输入" v-model="materialData.certnum"></el-input>
        </el-form-item>
        <el-form-item label="标准值">
          <el-input placeholder="请输入" v-model="materialData.standard_value"></el-input>
        </el-form-item>
        <el-form-item label="单位">
          <el-input placeholder="请输入" v-model="materialData.unit"></el-input>
        </el-form-item>
        <el-form-item label="数量">
          <el-input placeholder="请输入" v-model="materialData.number"></el-input>
        </el-form-item>
        <el-form-item label="生产厂家">
          <el-input placeholder="请输入" v-model="materialData.manfact"></el-input>
        </el-form-item>
        <el-form-item label="购置日期">
          <el-date-picker
            type="date"
            v-model="materialData.bytime"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="生产日期">
          <el-date-picker
            type="date"
            v-model="materialData.manufdate"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="有效日期">
          <el-date-picker
            type="date"
            v-model="materialData.effective_time"
            style="width:100%"
            placeholder="选择日期"
            valueFormat="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="使用仪器">
          <el-input placeholder="请输入" v-model="materialData.useequ"></el-input>
        </el-form-item>
        <el-form-item label="用途">
          <el-input placeholder="请输入" v-model="materialData.purpose"></el-input>
        </el-form-item>
        <el-form-item label="放置地点">
          <el-input placeholder="请输入" v-model="materialData.location"></el-input>
        </el-form-item>
        <el-form-item label="负责人">
          <searchperson
            @getpersonid="getpersonid"
            :itempersonid="itempersonid"
            v-if="issearchperson"
          ></searchperson>
        </el-form-item>
        <el-form-item label="附件" style="width:100%">
          <upload2
            :filelimit="10"
            :filelink.sync="filearr2"
            :isedit="false"
            :ispic="false"
            v-if="isreload2"
          ></upload2>
        </el-form-item>
        <el-form-item label="备注">
          <el-input placeholder="请输入" v-model="materialData.remark"></el-input>
        </el-form-item>

        <el-form-item label>
          <span>&nbsp;</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="domaterial" v-if="title=='添加标准物质'">确 定</el-button>
        <el-button size="mini" type="primary" @click="doeditmaterial" v-else>保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchperson from "~/components/common/searchperson.vue";
import upload2 from "~/components/common/upload2.vue";
import FileSaver from "file-saver";
import XLSX from "xlsx";

export default {
  components: {
    searchperson,
    upload2
  },
  props: {
    usertype: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      newmaterialList:[],
      ts: this.newStore(),
      dialogVisible: false,
      materialData: {
        charger: ""
      },
      date1: ["", ""],
      date2: ["", ""],
      searchmaterial: {},
      choosedmaterial: [],
      materialList: [],
      filearr2: [],
      itempersonid: "",
      isreload2: true,
      pagobj: {
        currentPage3: 1,
        pagesize: 10,
        total: 10
      },
      fzrid: "",
      issearchperson: true,
      title: "添加标准物质"
    };
  },
  created() {
    console.log(localStorage.getItem("pid"));

    if (this.usertype == "fzr") {
      this.fzrid = localStorage.getItem("pid");
    } else {
      this.fzrid = "";
    }
    this.getmaterialList();
  },
  methods: {
    // 删除人员
    deletematerial() {
      if (this.choosedmaterial.length == 0) {
        this.$message({
          type: "info",
          message: "请先勾选标准物质"
        });
        return;
      }
      const deletearr = [];
      for (let i = 0; i < this.choosedmaterial.length; i += 1) {
        deletearr.push(this.choosedmaterial[i].hash.id);
      }

      this.$confirm("确认删除已选择的标准物质?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const req = {
            handle:
              "DD5D108B99FC12B72DC0B97F927BBE3D6AD8A79FF96995F2A7C79167ABD9E323",
            id: deletearr
          };
          this.spost(this.ts, "/mainservlet", req).then(() => {
            this.$message({
              type: "success",
              message: "删除成功"
            });
            this.getmaterialList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    editmaterial() {
      this.title = "编辑特殊物质";
      this.filearr2 = [];
      if (this.choosedmaterial.length == 0) {
        this.$message({
          type: "info",
          message: "请先勾选物质"
        });
        return;
      }
      if (this.choosedmaterial.length > 1) {
        this.$message({
          type: "info",
          message: "只能勾选一种标准物质"
        });
        return;
      }
      const req = {
        handle:
          "DD5D108B99FC12B72DC0B97F927BBE3DD80BF00E0C3229A4F075779123AA8B19947C61655EDF54FA",
        id: this.choosedmaterial[0].hash.id
      };
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        const a = {};
        for (let j = 0; j < ts.d.data.operation2.length; j += 1) {
          a.url = ts.d.data.operation2[j].hash.fileurl;
          a.name = ts.d.data.operation2[j].hash.filename;
          this.filearr2.push(a);
        }
        this.materialData = Object.assign({}, ts.d.data.operation1[0].hash);
        this.itempersonid = this.materialData.charger;
        this.issearchperson = false;
        this.$nextTick(() => {
          this.issearchperson = true;
        });
        this.dialogVisible = true;
      });
    },
    getmaterialList() {
      if (this.date1 == null) {
        this.date1 = [];
      }
      if (this.date2 == null) {
        this.date2 = [];
      }
      const req = this.searchmaterial;
      req.fzrid = this.fzrid;
      req.handle =
        "DD5D108B99FC12B72DC0B97F927BBE3D1EA76D4710AEAA368624F1C86CD24E67";
      [req.effective_time_begin] = [this.date2[0]];
      [req.effective_time_end] = [this.date2[1]];
      [req.bytime_begin] = [this.date1[0]];
      [req.bytime_end] = [this.date1[1]];
      req.start = (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize;
      req.limit = this.pagobj.pagesize;
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.materialList = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
      this.getmaterialListnewnew();
    },
    getmaterialListnewnew() {
      if (this.date1 == null) {
        this.date1 = [];
      }
      if (this.date2 == null) {
        this.date2 = [];
      }
      const req = this.searchmaterial;
      req.fzrid = this.fzrid;
      req.handle =
        "DD5D108B99FC12B72DC0B97F927BBE3D1EA76D4710AEAA368624F1C86CD24E67";
      [req.effective_time_begin] = [this.date2[0]];
      [req.effective_time_end] = [this.date2[1]];
      [req.bytime_begin] = [this.date1[0]];
      [req.bytime_end] = [this.date1[1]];
      req.start = (this.pagobj.currentPage3 - 1) * this.pagobj.pagesize;
      req.limit = 1000000000;
      this.spost(this.ts, "/mainservlet", req).then(ts => {
        this.newmaterialList = ts.d.data.operation1;
        this.pagobj.total = parseInt(ts.d.data.operation2[0].hash.allrs);
      });
    },
    // 公共方法图片数组转路径数组
    posturl(arr) {
      const a = [];
      for (let i = 0; i < arr.length; i += 1) {
        a.push(arr[i].url);
      }
      return a;
    },
    // 公共方法图片数组转名称数组
    postname(arr) {
      const b = [];
      for (let i = 0; i < arr.length; i += 1) {
        b.push(arr[i].name);
      }
      return b;
    },
    // 获取负责人
    getpersonid(val) {
      console.log(val);
      this.materialData.charger = val.id;
    },
    handleSelectionChange(val) {
      this.choosedmaterial = val;
    },
    addmaterial() {
      this.title = "添加标准物质";
      this.materialData = {};
      this.filearr2 = [];
      this.itempersonid = "";
      this.dialogVisible = true;
      this.isreload2 = false;
      this.$nextTick(() => {
        this.isreload2 = true;
      });
      this.issearchperson = false;
      this.$nextTick(() => {
        this.issearchperson = true;
      });
    },
    domaterial() {
      if (
        this.materialData.mname == undefined ||
        this.materialData.mname == ""
      ) {
        this.$message({
          type: "info",
          message: "请填写物质名称"
        });
        return;
      }
      this.$confirm("是否添加标准物质?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const req = this.materialData;
          req.handle =
            "DD5D108B99FC12B72DC0B97F927BBE3D0BA49C4D23B759FBA7C79167ABD9E323";
          req.fileurl = this.posturl(this.filearr2);
          req.filename = this.postname(this.filearr2);
          this.spost(this.ts, "/mainservlet", req).then(() => {
            this.$message({
              type: "success",
              message: "添加成功!"
            });
            this.dialogVisible = false;
            this.getmaterialList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    doeditmaterial() {
      if (
        this.materialData.mname == undefined ||
        this.materialData.mname == ""
      ) {
        this.$message({
          type: "info",
          message: "请填写物质名称"
        });
        return;
      }
      this.$confirm("是否编辑标准物质?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const req = this.materialData;
          req.handle =
            "DD5D108B99FC12B72DC0B97F927BBE3D6655C600C04B1120A98E91F8AE52A8B5BFF0B9210751F692";
          req.fileurl = this.posturl(this.filearr2);
          req.filename = this.postname(this.filearr2);
          this.spost(this.ts, "/mainservlet", req).then(() => {
            this.$message({
              type: "success",
              message: "保存成功!"
            });
            this.dialogVisible = false;
            this.getmaterialList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    //导出功能
    daochu() {
      if (this.materialList.length == 0) {
        this.$message({
          type: "error",
          message: "导出数据为空,无法导出"
        });
        return false;
      }

      var xlsxParam = { raw: true }; //转换成excel时，使用原始的格式
      /* generate workbook object from table */
      const wb = XLSX.utils.table_to_book(
        document.querySelector("#tableexcelnewnew"),
        xlsxParam
      );
      console.log(wb);
      /* get binary string as output */
      const wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream;charset=utf-8" }),
          "sheetjs.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    }
  }
};
</script>
<style >
.el-form-item {
  width: 50%;
  margin-bottom: 22px;
  float: left;
}
</style>

